<template>
  <div>
    <!-- 头部 -->
    <div class="dashboard">
      <div class="divLeft">
        <div class="banner">
          <img src="@/assets/left.png" alt="" class="imgleft">
          <img src="@/assets/right.png" alt="" class="imgright">
          <img src="@/assets/photo.png" alt="" class="userheader">
          <p class="user-title">仓储管理员</p>
          <p class="subject-title">我不是为了输赢，我就是认真！</p>
          <p class="subject-author">—— 罗永浩</p>
          <div class="site">
            <p>北京总仓</p>
          </div>
        </div>
        <div class="backlog">
          <div class="subject">代办信息</div>
          <div v-if="statusLsit.length!==0" class="item-list">
            <el-row>
              <el-col :span="8" style="padding-right: 15px;">
                <a href="#/manage-storage-in/list-in/list">
                  <div class="backlog-item">
                    <div class="icon">
                      <i class="iconfont icon-ruku" />
                    </div>
                    <div class="title">入库单</div>
                    <div class="bottom">
                      <span class="spanlabel">新增</span>
                      <span class="spanvalue">{{ statusLsit[0].value1 }}</span>
                      <span class="spanlabel">待审核</span>
                      <span class="spanvalue" style="color: rgb(0, 118, 255);">{{ statusLsit[0].value2 }}</span>
                    </div>
                  </div>
                </a>
              </el-col>
              <el-col :span="8" style="padding-left: 15px; padding-right: 15px;">
                <a href="#/manage-storage-out/list-out">
                  <div class="backlog-item">
                    <div class="icon" style="background: rgb(255, 178, 0);">
                      <i class="iconfont icon-chuku" />
                    </div>
                    <div class="title">出库单</div>
                    <div class="bottom">
                      <span class="spanlabel">新增</span>
                      <span class="spanvalue">{{ statusLsit[1].value1 }}</span>
                      <span class="spanlabel">待审核</span>
                      <span class="spanvalue" style="color: rgb(0, 118, 255);">{{ statusLsit[1].value2 }}</span>
                    </div>
                  </div>
                </a>
              </el-col>
              <el-col :span="8" style="padding-left: 15px;">
                <a href="#/manage-storage/list">
                  <div class="backlog-item">
                    <div class="icon" style="background: rgb(255, 113, 0);">
                      <i class="iconfont icon-pandiandan" />
                    </div>
                    <div class="title">盘点单</div>
                    <div class="bottom">
                      <span class="spanlabel">新增</span>
                      <span class="spanvalue">{{ statusLsit[2].value1 }}</span>
                      <span class="spanlabel">待审核</span>
                      <span class="spanvalue" style="color: rgb(0, 118, 255);">{{ statusLsit[2].value2 }}</span>
                    </div>
                  </div>
                </a>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <!-- 右通知栏 -->
      <div class="divRight">
        <div class="notes">
          <div class="subject">通知/公告</div>
          <div class="item">
            <div class="hr" />
            <div class="title">紧急盘点通知</div>
            <div class="time">2020.12.30 18:23:14</div>
          </div>
          <div class="item">
            <div class="hr" />
            <div class="title">运维服务更新通知</div>
            <div class="time">2021.01.25 18:23:14</div>
          </div>
          <div class="item">
            <div class="hr" />
            <div class="title">客户入库变更通知</div>
            <div class="time">2021.01.26 18:23:14</div>
          </div>
          <div class="item">
            <div class="hr" />
            <div class="title">五一放假通知</div>
            <div class="time">2021.02.15 18:23:14</div>
          </div>
          <div class="item">
            <div class="hr" />
            <div class="title">品达物流系统对接通知</div>
            <div class="time">2021.3.25 18:23:14</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 导航 -->
    <div class="tasks">
      <div class="subject">任务导航</div>
      <div class="item-list">

        <a href="#/manage-storage-in/list-in/task-receive">
          <div class="tasks-item">
            <div class="icon" style="background: rgb(0, 118, 255);">
              <i class="iconfont icon-daishouhuo" />
            </div>
            <div class="title">收获任务</div>
          </div>
        </a>

        <a href="#/manage-storage-in/list-in/task-add">
          <div class="tasks-item">
            <div class="icon" style="background: rgb(82, 212, 243);">
              <i class="iconfont icon-shangjia" />
            </div>
            <div class="title">上架任务</div>
          </div>
        </a>

        <a href="#/manage-storage/list-task">
          <div class="tasks-item">
            <div class="icon" style="background: rgb(255, 113, 0);">
              <i class="iconfont icon-pandian" />
            </div>
            <div class="title">盘点任务</div>
          </div>
        </a>

        <a href="#/manage-storage-out/task-picking">
          <div class="tasks-item">
            <div class="icon" style="background: rgb(255, 96, 158);">
              <i class="iconfont icon-jianhuo" />
            </div>
            <div class="title">拣货任务</div>
          </div>
        </a>

        <a href="#/manage-storage-out/manage-task-transfer">
          <div class="tasks-item">
            <div class="icon" style="background: rgb(255, 178, 0);">
              <i class="iconfont icon-jiaojie" />
            </div>
            <div class="title">交接任务</div>
          </div>
        </a>

      </div>
    </div>
    <!-- 信息 -->
    <!-- <Myecharts /> -->
    <echartsMsg />
  </div>
</template>

<script>
import { workStatusApi } from '@/api'
import echartsMsg from '@/views/dashboard/component/echartsMsg.vue'
// import Myecharts from '@/views/dashboard/component/Myecharts.vue'
export default {
  components: { echartsMsg },
  data() {
    return {
      statusLsit: []
    }
  },
  created() {
    this.getstatusLsit()
  },
  methods: {
    async getstatusLsit() {
      const { data } = await workStatusApi()
      this.statusLsit = data.data
      // console.log(data)
    }
  }
}
</script>

<style lang="scss" scope>
.dashboard {

  height: 452px;
}
.divLeft {
  width: calc(100% - 261px);
  padding-right: 30px;
  float: left;
  .banner {
    position: relative;
    width: 100%;
    height: 148px;
    background: linear-gradient(270deg,#ffc771,#ffa634);
    box-shadow: 0 0 6px 0 rgb(188 151 69 / 12%);
    border-radius: 12px;
    .imgleft {
      position: absolute;
      height: 148px;
      left: 0;
    }
    .imgright {
      position: absolute;
      height: 148px;
      right: 0;
    }
    .userheader{
      position: absolute;
      top: 31px;
      left: 43px;
      height: 62px;
    }
    .user-title{
      position: absolute;
      left: 36px;
      bottom: 20px;
      line-height: 22px;
      color: #332929;
    }
    .subject-title {
      position: absolute;
      left: 200px;
      top: 36px;
      font-size: 18px;
      color: #fff;
    }
    .subject-author {
      position: absolute;
      top: 76px;
      left: 400px;
      font-size: 16px;
      color: #fff;
    }
    p {
      margin: 0;
    }
    .site {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 147px;
      height: 40px;
      background: #f8f5f5;
      border-radius: 6px;
      opacity: .79;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      p {
        font-size: 14px;
        font-weight: 500;
        color: #332929;
      }
    }
  }
  .backlog {
    margin-top: 20px;
    width: 100%;
    height: 282px;
    background: #fff;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    border-radius: 12px;
    padding: 25px;
    .subject{
      font-size: 16px;
      font-family: PingFangSC-Semibold,PingFang SC;
      font-weight: 600;
      color: #332929;
      line-height: 22px;
    }
    a,a:hover{
      color: inherit;
      outline: none;
      text-decoration: none;
      background: #fff;
      box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    }
    a{
      background-color: transparent;
      .backlog-item {
        position: relative;
        height: 186px;
        background: #fbf7f7;
        border-radius: 8px;
        padding: 20px;
        cursor: pointer;
        &:hover {
          background: #fff;
          box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
        }
        .icon{
          width: 52px;
          height: 52px;
          background: #0076ff;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          .iconfont {
          font-size: 40px;
          color: #fff;
          }
        }
        .title {
          position: absolute;
          top: 34px;
          left: 85px;
          font-size: 16px;
          font-family: PingFangSC-Medium,PingFang SC;
          font-weight: 500;
          color: #332929;
          line-height: 22px;
        }
        .bottom {
          position: absolute;
          bottom: 20px;
          .spanlabel {
            font-size: 14px;
            font-family: PingFangSC-Regular,PingFang SC;
            font-weight: 400;
            color: #887e7e;
            margin-right: 10px;
            vertical-align: super;
          }
          .spanvalue {
            font-size: 36px;
            font-family: DIN-Medium,DIN;
            font-weight: 500;
            color: #332929;
            margin-right: 20px;
          }
        }
      }
    }
  }

}
.item-list {
  margin-top: 20px;

}
.divRight{
    // position: absolute;
    // right: 0;
    float: right;
    .notes{
      width: 255px;
      height: 451px;
      background: #fff;
      box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
      border-radius: 12px;
      padding: 30px;
      .subject {
        font-size: 16px;
        font-family: PingFangSC-Semibold,PingFang SC;
        font-weight: 600;
        color: #332929;
        line-height: 22px;
      }
      .item {
        margin-top: 15px;
        .hr {
          width: 201px;
          height: 1px;
          background-color: #f5efee;
        }
        .title {
          width: 195px;
          height: 18px;
          font-size: 13px;
          font-family: PingFangSC-Regular,PingFang SC;
          font-weight: 400;
          color: #332929;
          line-height: 18px;
          margin-top: 15px;
        }
        .time {
          width: 115px;
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC-Regular,PingFang SC;
          font-weight: 400;
          color: #887e7e;
          line-height: 17px;
          margin-top: 10px;
        }
      }
    }
  }
.tasks {
  margin-top: 20px;
  width: 100%;
  height: 188px;
  background: #fff;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  border-radius: 12px;
  padding: 25px;
  .subject{
    font-size: 16px;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 600;
    color: #332929;
    line-height: 22px;
  }
  .item-list{
    margin-top: 19px;
    display: flex;
    justify-content: space-between;
    .tasks-item{
      position: relative;
      width: 290px;
      height: 93px;
      background: #fbf7f7;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      &:hover {
        box-shadow: 0 0 6px 0 rgb(144 142 142 / 20%);
        background-color: #fff;
      }
      .icon {
      width: 50px;
      height: 50px;
      background: #0076ff;
      border-radius: 25px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .iconfont {
        font-size: 26px;
        color: #fff;
      }
    }
    }
  }
}
</style>
